<template>
  <div class="storeSales">
    <!-- 打印的容器 -->
    <div class="console_wrap" id="selectTable" v-show="false">
      <p class="title title_dibu">店铺销售单</p>
      <!-- div容器 -->
      <div class="xuhao_buttom">
        <span
          >VIP:{{
            !leftTableData[0]
              ? ''
              : leftTableData[0].vip
              ? leftTableData[0].vip
              : ''
          }}</span
        >
        <span
          >销售序号:{{
            !leftTableData[0]
              ? ''
              : leftTableData[0].vipSellSequence
              ? leftTableData[0].vipSellSequence
              : ''
          }}</span
        >
      </div>
      <!-- 表格 -->
      <div class="table_wrap_one">
        <div class="table_title">
          <!-- 这里是头部的 -->
          <p>序号</p>
          <p>货号</p>
          <p>数量</p>
          <p>单价</p>
        </div>
        <div
          class="table_title"
          v-for="(item, index) in right_OneDim_tableData"
          :key="item.id"
        >
          <!-- 这里是遍历生成的 -->
          <p>{{ index + 1 }}</p>
          <p>{{ item.kindsNumber }}</p>
          <p>{{ item.number }}</p>
          <p>{{ item.onePrice }}</p>
          <!-- 这里是遍历生成的 -->
        </div>
      </div>
      <!-- 底部合计 -->
      <div class="buttom_total">
        <p class="title" style="font-size: 16px; font-weight: 400">
          售价合计:{{
            !leftTableData[0]
              ? ''
              : leftTableData[0].money
              ? leftTableData[0].money
              : ''
          }}
          数量:{{
            !leftTableData[0]
              ? ''
              : leftTableData[0].number
              ? leftTableData[0].number
              : ''
          }}
        </p>
      </div>
    </div>
    <!-- 第一行的容器 -->
    <!-- <div class="cog-btn">
      <div>
        <el-button icon="el-icon-plus" type="primary" @click="addBtnClick"
          >新增</el-button
        >
        <el-button icon="el-icon-circle-check">确认</el-button>
        <el-button icon="el-icon-printer">打印小票</el-button>
        <el-button icon="el-icon-delete">删单</el-button>
      </div>
      <div>
        <el-checkbox v-model="twoDimensionalCheckBoxtatus" border
          >二维</el-checkbox
        >
      </div>
    </div> -->
    <!-- 要打印的表格 -->
    <!-- <div class="console_table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div> -->
    <!-- 要打印的表格 -->
    <div class="ssq-btn">
      <div>
        <el-button icon="el-icon-plus" type="primary" @click="addBtnClick"
          >新增</el-button
        >
        <el-button
          icon="el-icon-circle-check"
          :disabled="confirmBtDisable"
          @click="handConfirmBtnClick"
          >确认</el-button
        >
        <el-button icon="el-icon-printer" @click="ticket('selectTable')"
          >打印小票</el-button
        >
        <el-button icon="el-icon-delete" @click="delect_dan_btnClick"
          >删单</el-button
        >
      </div>
      <div style="display: flex">
        <div style="margin-top: 5px; display: flex">
          <div class="tip" style="background: #6bcc7b"></div>
          :已完成
          <div class="tip" style="background: #ff0000"></div>
          :未确认
          <div class="tip" style="background: #65318e"></div>
          :
          <p style="margin-right: 15px">未结账</p>
          <!-- <div class="tip" style="background:#017aff;"></div>:<p style="margin-right:15px;">调货摘要</p> -->
        </div>
        <el-checkbox v-model="twoDimensionalCheckBoxtatus" border
          >二维</el-checkbox
        >
      </div>
    </div>
    <!-- 第二行表格的容器 -->
    <div class="cog-tab">
      <!-- 左边表格 -->
      <div>
        <el-table
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px'
          }"
          :cell-style="{ padding: 0, height: '26px' }"
          highlight-current-row
          :data="leftTableData"
          style="width: 100%"
          height="85vh"
          show-summary
          @row-click="leftTableRowClick"
        >
          <el-table-column prop="settleAccounts" label="已结账" width="80px">
            <template slot-scope="scope">
              <div style="display: flex; text-align: center">
                <!-- sequenceStatus这个字段只有未确认0，已经完成2.未结账：4 -->
                <div
                  class="tip1"
                  :style="{
                    background:
                      scope.row.sequenceStatus == 0
                        ? '#FF0000'
                        : scope.row.sequenceStatus == 4
                        ? '#65318E'
                        : '#6BCC7B'
                  }"
                ></div>
                <p>
                  {{ scope.row.settleAccounts == 0 ? '未结账' : '已结账' }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="affirm" label="已确认" width="80px">
            <template slot-scope="scope">
              <div style="display: flex; text-align: center">
                <!-- <div
                  class="tip1"
                  :style="{
                    background: scope.row.affirm == 0 ? '#FF0000' : '#6BCC7B'
                  }"
                ></div> -->
                <p>
                  {{ scope.row.affirm == 0 ? '未确认' : '已确认' }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="vipSellSequence"
            label="单号"
            width="120px"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="sellTime"
            label="日期"
            width="160"
          ></el-table-column>
          <el-table-column
            prop="number"
            label="数量"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="money"
            label="金额"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="preferential"
            label="抹零"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="payg"
            label="收现"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="personnelNames"
            label="营业员"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="integralNumber"
            label="积分"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="vip"
            label="VIP"
            width="115px"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </div>
      <div>
        <!-- 右边表格二维表 true-->
        <TwoDimensionalTable
          v-if="twoDimensionalCheckBoxtatus"
          :right_TwoDim_tableData="right_TwoDim_tableData"
        />
        <!-- 右边表格一维表 false-->
        <OneDimensionTable
          v-else
          :right_OneDim_tableData="right_OneDim_tableData"
        />
      </div>
    </div>
    <!-- 底部的组件 -->
    <!-- <foot-view class="footView">
      <div slot="text">
        <span>数据库：{{ jxQuarter }}</span>
      </div>
    </foot-view> -->
    <!-- 点击新增的时候，弹出的新建的组件 -->
    <NewAdd
      v-if="isShowNewBuildDialog"
      @closeNewBuildDialog="closeNewBuildDialog"
    >
    </NewAdd>
    <!-- 和打印小票有关 -->
    <div id="L" v-show="false"></div>
    <print-ticket v-show="false"></print-ticket>
  </div>
</template>

<script>
// 页面api的引入
import {
  add_store_sales_api,
  delete_vip_sales_api,
  query_store_sales_api,
  query_by_sellSequence_api,
  confirm_api,
  delete_dan_deleteSell_api
} from '../../../request/store/store_sales_request.js'

// 底部的组件
import footView from '../../../components/FootView'
// 这个是列印小票的js
const resources1 = require('../../../config/print.js')
// 点击新建的时候，弹出的组件
import NewAdd from './childComp/NewAdd.vue'
// 一维表格的组件
import OneDimensionTable from './childComp/OneDimensionalTable.vue'
// 二维表格的组件
import TwoDimensionalTable from './childComp/TwoDimensionalTable.vue'
// 引入打印小票的组件
import printTicket from '../../../components/ticketPrint.vue'
//
import { myPrintCss } from '../../../config/print'
export default {
  name: 'store_sales_s',
  data() {
    return {
      isShowConsole: false,
      // 控制确认按钮被点击的时候，触发的函数
      confirmBtDisable: false,
      // 保存表格左边被点击当前row的对象
      leftTableCurrentRowObj: {},
      // 控制新建的dialog的显示状态
      isShowNewBuildDialog: false,
      // 二维复选框的选中状态
      twoDimensionalCheckBoxtatus: false,
      // 左边表格的数据
      leftTableData: [],
      // 右边一维表格的数据
      right_OneDim_tableData: [],
      // 右边二维表格的数据
      right_TwoDim_tableData: [],
      //
      jxQuarter: null,
      // jxQuarter: document.cookie.match(
      //   new RegExp('jxQuarter' + name + '=([^;]*)(;|$)')
      // )[1]
      // 保存子组件传过来的数组
    }
  },

  methods: {
    //列印小票
    ticket(selectTable) {
      // console.log(this.leftTableData, 'this.leftTableData')
      if (Object.keys(this.leftTableCurrentRowObj).length === 0) {
        this.$message.warning('请选中左表要打印的数据')
        return
      }
      // 打印函数 这个参数接受的是一个id值，获取元素的名字
      // 点击按钮的时候，调用这个方法，并且传一个id的名字
      // this.printdiv(selectTable)
      // let printBody = document.getElementById('selectTable')
      // 拿到页面上要打印的容器里面的innerHTML
      let printHtml = document.getElementById('selectTable').innerHTML
      // 创建一个新的页面
      let wind = window.open(
        '',
        'newwindow',
        'height=500, width=1000, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no'
      )
      // 在新的页面赋值，拿到要打印容器里面的innerhtml
      wind.document.body.innerHTML = printHtml
      // 创建一个元素，
      let style = document.createElement('style')
      // 这个元素的样式为css类型
      style.type = 'text/css'
      // 这个样式类型的元素样式，放入样式（myPrintCss）是通过export导入的js文件
      style.innerHTML = myPrintCss
      // 在新页面的头部插入样式，内部样式
      wind.document.head.appendChild(style)
      // 开始打印
      wind.print()
    },
    /*
      左边表格的row被点击的时候，触发的函数,用来当前row保存对象
    */
    leftTableRowClick(row) {
      console.log(row, 'leftTableRowClick')
      this.leftTableCurrentRowObj = row
    },
    /*
     确认按钮被点击的时候，触发的函数
    */
    async handConfirmBtnClick() {
      // console.log('ok')
      // 如果没有选中表格的数据不能发请求
      if (!Object.keys(this.leftTableCurrentRowObj).length) return
      // 点击确认按钮的时候，触发的api
      const { data: res } = await confirm_api({
        vipSellSequence: this.leftTableCurrentRowObj.vipSellSequence
      })
      // 获取到返回的数据
      console.log(res, 'confirm_api')
      if (res.code !== 200) return
      // 通过成功之后，再用当前的vipSellSequence去查询，获取对应的数据更新 (和监听关闭新建按钮的逻辑是一致的，数据也是相同)
      this.get_data_by_vipSellSequence(
        this.leftTableCurrentRowObj.vipSellSequence
      )
      // 然后禁用按钮
      this.confirmBtDisable = true
    },
    /*
      新增按钮被点击的时候，触发的函数
    */
    addBtnClick() {
      this.isShowNewBuildDialog = true
    },
    // 监听子组件关闭icon触发的函数,并且拿到子组件底部表格的数据，进行显示
    async closeNewBuildDialog(sellSequence) {
      console.log(sellSequence, '子组件传过来的销售序号')
      // 保存子组件传过来的销售序号（然后拿到填充表格的数据）
      this.get_data_by_vipSellSequence(sellSequence)
    },
    /*
    // 封装一个通过vip销售序号获取数据的方法
   */
    async get_data_by_vipSellSequence(vipSellSequence) {
      this.isShowNewBuildDialog = false
      // 没有这个不能发起ajax请求获取数据
      console.log(vipSellSequence, '想要发起ajax请求')
      if (!vipSellSequence) return
      // 通过自组件传过来的vip销售序号，就能拿到查询到的数据
      const { data: res } = await query_by_sellSequence_api({
        vipSellSequence: vipSellSequence,
        // 新增一个直营店编号
        directSaleNo: this.$store.state.currentStoreData.no
      })
      console.log(res.data, '通过销售序号查询得到的数据')
      // 从里面分别取出来总条数，一维表格的数据和二维表格的数据
      this.leftTableData = res.data.total
      // 去掉日期中的后面时分秒
      res.data.info.map((item) => {
        if (item.sellTime) {
          item.sellTime = item.sellTime.substring(0, 10)
        }
        if (item.enteringTime) {
          item.enteringTime = item.enteringTime.substring(0, 10)
        }
      })
      this.right_OneDim_tableData = res.data.info
      // 这一步是去除二维表格中的 0
      for (const item of res.data.twoInfoList) {
        for (const key in item) {
          if (item[key] === 0) {
            item[key] = ''
          }
        }
      }
      // q去掉0之后，给二维表格
      this.right_TwoDim_tableData = res.data.twoInfoList
    },
    /*
     删单按钮被点击的时候，触发的函数
    */
    async delect_dan_btnClick() {
      // console.log('ok')，没有选中数据，直接return
      if (!Object.keys(this.leftTableCurrentRowObj).length) return
      this.$confirm('确定要删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 用户点击确定的时候
          // 拼接后端需要的参数（就是选中的对象）
          const { data: res } = await delete_dan_deleteSell_api(
            this.leftTableCurrentRowObj
          )
          console.log(res, 'delete_dan_deleteSell_api')
          if (res.code !== 200) return
          this.$message.success('删除成功')
          // 清空这个页面的所有的数组和保存的行对象
          this.leftTableData = []
          this.right_OneDim_tableData = []
          this.right_TwoDim_tableData = []
          this.leftTableCurrentRowObj = {}
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },

  components: {
    footView,
    NewAdd,
    OneDimensionTable,
    TwoDimensionalTable,
    printTicket
  },
  created(){
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
  }
}
</script>

<style lang="less" scoped>
// 表格样式
.table_wrap_one {
  width: 600px;
  margin: 0 auto;
  .table_title {
    display: flex;
    justify-content: space-around;
    p {
      width: 200px;
      border: 1px solid #000;
      text-align: center;
    }
  }
}
//
.buttom_total {
  margin-top: 10px;
}
//
.console_wrap {
  background: cadetblue;
  width: 800px;
  .title {
    width: 300px;
    // background: pink;
    margin: 0 auto;
    text-align: center;
    font-weight: 800;
    font-size: 20px;
  }
  //
  .xuhao_buttom {
    display: flex;
    justify-content: space-between;
    width: 600px;
    margin: 0 auto;
    margin-top: 30px;
    padding: 2px 0;
  }
  //
}
/* 

*/
.ssq-btn {
  padding: 15px 15px;
  display: flex;
  justify-content: space-between;
}
.tip {
  border: 1px;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  margin: 6px 5px 0 5px;
}
.tip1 {
  border: 1px;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  margin: 6px 1px 0 4px;
}
.storeSales {
  margin-right: 15px;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  position: relative;
}
.cog-top {
  padding-top: 10px;
  border-bottom: 2px solid #f4f4f4;
}
.cog-top div {
  margin-bottom: 5px;
  white-space: nowrap;
}
.cog-top p:first-child {
  line-height: 30px;
  display: inline-block;
  margin-right: 5px;
}
.cog-top p:not(:first-child) {
  line-height: 30px;
  display: inline-block;
  width: 70px;
  text-align: right;
  margin-right: 10px;
}
.top-inp {
  width: 160px;
}
.cog-btn {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
}
.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
.footView span i {
  margin-right: 5px;
}
.cog-tab {
  display: flex;
}
.cog-tab > div:first-child {
  padding-right: 20px;
  width: 30%;
  border-right: 2px solid #f4f4f4;
}
.cog-tab > div:last-child {
  padding-left: 20px;
  width: 70%;
}
</style>

<style>
.storeSales .el-input {
  height: 30px;
}
.storeSales .cog-top .el-input__inner {
  height: 30px;
}
.storeSales .el-checkbox.is-bordered {
  padding: 5px 10px 0 10px;
  height: 30px;
}
.storeSales .cog-top .el-date-editor .el-range__icon {
  line-height: 23px;
}
.storeSales .cog-top .el-date-editor .el-range-separator {
  line-height: 23px;
  width: 8%;
}
.storeSales .el-input__icon {
  line-height: 30px;
}
.storeSales .el-date-editor.el-input,
.storeSales .el-date-editor.el-input__inner {
  width: 160px;
}
</style>
